<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <title>限时抢购</title>
    <style>
        #img {float: left;margin-top: 12px;margin-right: 3px;}
        .spsx {position: fixed;width: 94%;padding: 0 3%;background: white;bottom: 0;z-index: 102;display: none;}
        .spsx .sp {border-bottom: 1px solid #F5F5F5;height: 70px;padding-bottom: 2%;}
        .spsx .sp img {float: left;width: 28%; margin-top: -5%;border: 2px solid white; }
        .spsx .sp > div {float: left;width: 65%;margin-left: 2%;}
        .spsx .sp > div h4 {width: 80%;padding: 2% 0;font-size: 14px;line-height: 1.5;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
        .spsx .sp > div h4 a {color: #212121;  }
        .spsx .sp > div p {font-size: 14px;color: #999999;}
        .spsx .sp > div p span {color: #E73F09;float: right;}
        .wrap-det .board {width: 100%;height: 0px;background-color: rgba(0, 0, 0, 0.4);position: absolute;top: 0px;left: 0px;z-index: 101;}
        .spsx .size {border-bottom: 1px solid #F5F5F5;}
        .spsx .size h4 {font-size: 14px;line-height: 3;}
        .spsx .size ul {overflow: hidden;  }
        .spsx .size ul li {float: left;width: 23%;text-align: center;background: #F6F6F6;margin-bottom: 2%;font-size: 14px;line-height: 2;border-radius: 6px;}
        .spsx .size ul li:not(.first) {margin-left: 2.5%;}
        .spsx .size ul li a {color: #212121; }
        .spsx .size ul .cur {background: #E73F09;}
        .spsx .size ul .cur a { color: white;  }
        .spsx .num {border-bottom: 1px solid #F5F5F5;overflow: hidden;padding: 2% 0;}
        .spsx .num span { display: block;float: left;}
        .spsx .num ul {float: right;overflow: hidden;border: 1px solid #B3B3B3;border-radius: 4px;width: 30%;}
        .spsx .num ul li {float: left;font-size: 14px;line-height: 24px;width: 32%; text-align: center;}
        .spsx .num ul li:nth-of-type(2) { border-left: 1px solid #B3B3B3; border-right: 1px solid #B3B3B3;}
        .spsx .footer1 { padding: 2% 0;}
        .spsx .footer1 .list2 {float: left;width: 100%;overflow: hidden;margin-left: 1%;padding: 2% 0;}
        .spsx .footer1 .list2 li { float: left;width: 46%; margin-left: 2.5%;text-align: center;font-size: 14px;line-height: 2.5;border-radius: 4px;}
        .spsx .footer1 .list2 li:nth-of-type(1) {border: 1px solid #E73F09;}
        .spsx .footer1 .list2 li:nth-of-type(1) a { color: #E73F09;}
        .spsx .footer1 .list2 li:nth-of-type(2) a { color: white;}
        .spsx .footer1 .list2 li:nth-of-type(2) { background: #E73F09;border: 1px solid white;}
        .spsx .cancel {position: absolute;right: 3%;top: -5%;}
        .board {width: 100%;height: 0px;background-color: rgba(0, 0, 0, 0.4);position: absolute;top: 0px;left: 0px;z-index: 101;}

       /*限时抢购新样式*/
        .limit_list{width: 100%;}
        .limit_list ul{overflow: hidden;width: 100%;background: white;}
        .limit_list ul li{float: left;width: 20%;text-align: center;color: #333;}
        .limit_list ul li i{font-style: normal;font-size: 12px;line-height: 22px;}
        .limit_list ul li span{display: block;font-size: 12px;line-height: 20px;}
        .limit_list ul li.active{color: #E73F09;}
        .limit_list ul li.active i{font-size: 18px;font-weight: bold;}
        .limit_con>div{display: none;}
        .limit_con>div.active{display: block;}
        .limit_con .content{width: 100%;padding:5px 3% 5px 125px;position: relative;border-bottom: 1px solid #F6F6F6; }
        .limit_con .goods_pic{width: 115px;height: 90px;position: absolute;top:5px;left:5px;display: block;}
        .limit_con .goods_det{width: 100%;height: 90px;}
        .limit_con .goods_det>div{overflow: hidden;}
        .limit_con .goods_det h4{font-size: 12px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;height:40px;}
        .limit_con .goods_det .price{float: left;font-size: 18px;line-height: 24px;color: #E73F09;}
        .limit_con .goods_det .price span{display: block;font-size: 12px;line-height: 16px;color: #999;}
        .limit_con .goods_det .ope{float: right;text-align: right;}
        .limit_con .goods_det .ope .go{width: 70px;display: inline-block;font-size: 12px;line-height: 20px;color: #fff;background: #E73F09;border-radius: 2px;text-align: center;margin-top: 1px; }
        .limit_con .goods_det .ope .per{font-size: 12px;line-height: 14px;color: #666;margin-top: 5px;}
        .limit_con .goods_det .ope .per_num{display: inline-block;width: 90px;height: 6px;border:1px solid #E73F09;border-radius: 5px;overflow: hidden;margin-left: 5px;}
        .limit_con .goods_det .ope .per_num span{height: 100%;display: block;background: #E73F09;border-radius: 5px;}


    </style>
</head>
{include file='public/href' /}
<body>
<div class="wrap-sale">
    <div class="header" style="border-bottom:0px;">
        <p>限时抢购</p>
        <img src="__STATIC__/img_user/back.png" class="back"
             onclick=window.location.href="{:url('mobile/user_port/index')}">
    </div>
    <div class="limit_list" style="border-bottom:1px solid #F0F0F0;">
        <ul>
            {volist name="type" id="vo"}
            <li {eq name=":input('type_id')" value="$vo.id"}class="active"{/eq} onclick="jump_limit({$vo.id});">{$vo.name}</i><span>{eq name="key" value="0"}抢购中{else/}即将开场{/eq}</span></li>
            {/volist}
        </ul>
    </div>
    <div class="limit_con">
        <div class="active" id="content_list">

        </div>
    </div>

</div>
{include file='public/src' /}
<script>
    //限时抢购跳转到商品详情
    function jump_goods_details_limit(id){
        sessionStorage.setItem('goods_url_back',window.location.href);
        window.location.href = "{:url('mobile/user_category/goods_details')}?goods_id="+id+"&limit_status";
    }

    function jump_limit(id) {
        window.location.href = "{:url('mobile/user_port/limit_go')}?type_id="+id;
    }



    //layer流加载
    layui.use('flow', function() {
        var $ = layui.jquery;
        var flow = layui.flow;
        flow.load({
            elem: '#content_list' //流加载容器
            ,isAuto:true
            ,isLazyimg:true
            ,done: function(page, next){ //执行下一页的回调
                var lis = [];
                $.ajax({
                    url:"{:url('mobile/user_port/limit_go')}",
                    dataType:'json',
                    type:'post',
                    data:{'page':page,'type_id':"{:input('type_id')}"},
                    success:function(t){
                        console.log(t);
                        layui.each(t.data, function(index, item){

                            var text = '<div class="ope"><span class="go">立即抢购</span><div class="per">已售'+item.prent+
                                    '%<div class="per_num"><span style="width: '+item.prent+'%;"></span></div></div></div>';
                            if (item.purchase_number >= item.number){
                                var text = '<div class="ope"><span class="go">已抢光</span><div class="per">已售100%' +
                                        '<div class="per_num"><span style="width: 100%;"></span></div></div></div>';
                            }

                            lis.push('<div class="content" onclick="jump_goods_details_limit('+item.goods_id+');"><a>' +
                                    '<img src="/'+item.thumb_img+'" onerror=this.src="/static/mobile/img/empty_img.png" class="goods_pic">' +
                                    '<div class="goods_det">' +
                                    '<h4>'+item.title+'</h4><div>' +
                                    '<div class="price">￥'+item.price+'<span style="text-decoration:line-through;">￥'+item.goods_price+'</span></div>' +
                                    text + '</div></div></a></div>');

                        });
                        next(lis.join(''), page < t.pages);
                    },
                    error: function () {
                        layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                    }
                })
            }
        });
    });

//    //layer流加载
//    layui.use('flow', function() {
//        var $ = layui.jquery;
//        var flow = layui.flow;
//        flow.load({
//            elem: '#content_list' //流加载容器
//            ,isAuto:true
//            ,isLazyimg:true
//            ,done: function(page, next){ //执行下一页的回调
//                var lis = [];
//                $.ajax({
//                    url:"{:url('mobile/user_port/limit_go')}",
//                    dataType:'json',
//                    type:'post',
//                    data:{'page':page},
//                    success:function(t){
//                        layui.each(t.data, function(index, item){
//                        var price = item.price;
//                        var text = '<ul class="sale">' +
//                                '<li>' +
//                                '<a href="javascript:void(0);">已抢'+item.purchase_number+'/'+item.number+'件</a>' +
//                                '</li>' +
//                                '<li>' +
//                                '<a href="javascript:jump_goods_details_limit('+item.goods_id+');">马上抢</a>' +
//                                '</li>' +
//                                '</ul>';
//                        if (item.purchase_number >= item.number){
//                            text = '<ul class="sale-out">' +
//                                    '<li>' +
//                                    '<a href="javascript:void(0);">已抢'+item.purchase_number+'/'+item.number+'件</a>' +
//                                    '</li>' +
//                                    '<li>' +
//                                    '<a href="javascript:void(0);">抢光了</a>' +
//                                    '</li>' +
//                                    '</ul>'
//                            price = item.old_price;
//                        }
//
//                        lis.push('<div class="content" onclick="jump_goods_details_limit('+item.goods_id+');">' +
//                                '<img src="/'+item.thumb_img+'" onerror=this.src="/static/mobile/img/empty_img.png" >' +
//                                '<div class="right">' +
//                                '<h4><a href="#">'+item.title+'</a></h4>' +
//                                '<span>'+item.describe+'</span>' +
//                                '<p><span class="price">￥'+price+'</span></p>' +
////                                '<img src="__STATIC__/img_user/sy-qianbi.png" class="qianbi">' +
////                                '<font class="scale" style="line-height:3;">'+item.rebate_percentage+'%</font></p>' +
//                                        text +
//                                '</div></div>');
//
//                        });
//                        next(lis.join(''), page < t.pages);
//                    },
//                    error: function () {
//                        layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
//                    }
//                })
//            }
//        });
//    });
</script>
</body>
</html>